<template>
    <li>
        <span>
            {{ model.name }}
            <button v-if="hasChildren" @click="isOpen">
                {{ isOpen ? "收起" : "展开" }}
            </button>
        </span>
        <ul v-if="hasChildren && isOpen">
            <TreeItem v-for="item in model.children" :model="item" />
        </ul>
    </li>
</template>

<script>
export default{
    name: "TreeItem",

    props:{
        model:Object,
    },

    data(){
        return {
            isOpen:false,
        }
    },

    computed:{
        hasChildren(){
            return this.model.children && this.model.children.length > 0;
        }
    }
}
</script>